import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { autorun } from 'mobx'
import { Tabs, NavBar, Badge, Popover, Icon,Tools,Modal } from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
import GoalBaseInfo from './GoalBaseInfo';
import GoalSubInfo from './GoalSubInfo';
import GoalRelateInfo from'./GoalRelateInfo';
import GoalComment from './GoalComment';
import GoalOperateLog from './GoalOperateLog';
import GoalShare from './GoalShare';
import AlertPage from '../../../public/alertPage'
import * as Util from "../../../util";
import querystring from "querystring";
import {toJS} from 'mobx';
const Item = Popover.Item;
const getLabel = Tools.getLabel;
@inject('goalDetailStore')
@withRouter
@observer
class GoalDetail extends React.Component {

    constructor(props){
        super(props);
        this.state = {
          goalId: "",
          transferpage: 0,
          headPopoverVisile:false
        }
    }

    componentWillMount() {
      const {setGoalId,changeCurrpage,changeCommentReplayAutoFocus,getDetailView} = this.props.goalDetailStore;
      // let goalId = Util.getParams("id");
      let search = this.props.location.search.replace('?', '');
      let parse = querystring.parse(search);
      if(parse.id){
        let goalId = parse.id;
        setGoalId(goalId);
        getDetailView({goalId})
      }
      if(parse.page){
        this.state.transferpage = parseInt(parse.page)
      }
   
    
      let disposer = autorun(() => {
        const { goalId } = this.props.goalDetailStore
        if (this.state.goalId != goalId) {
            this.refreshPage(goalId, this.state.transferpage)
            this.setState({
                goalId,
                transferpage: 0
            })
          }
      })

      this.setState({
          disposer
      })
    }

    
  componentWillUnmount() {
    const { disposer } = this.state
    const { changeCurrpage, changeDetailData } = this.props.goalDetailStore
    changeCurrpage(0)
    changeDetailData({})
    disposer && disposer()
  }

  goBack = (value) =>{
    if(value == "delete"){
      this.props.history.go(-1);
    }else if(value == "complete"){
      const { goalId, getDetailView } = this.props.goalDetailStore;
      getDetailView({goalId});
    }
  }

    refreshPage = (taskid, page) => {
      const {changeCurrpage } = this.props.goalDetailStore;
      changeCurrpage(page || 0);
    }

    handleSelect = (opt) => {
      const {editStatus,setSpecial,goalId,changeGoalDetailField} = this.props.goalDetailStore;
      const value = opt.props.value;
    this.setState({
      headPopoverVisile: false
    }, () => {
      if (value == "revoker" || value == "complete" || value == "doing" || value == "delete") {
        let status = value == "complete" ? "2" : value == "revoker" ? "3" : value == "delete" ? "4" : "1";
        Modal.alert(getLabel(131329, '信息确认'),
          value == "complete" ? getLabel(508754, '确认标记完成吗?') :
            value == "doing" ? getLabel(508755, '确认标记进行吗?') :
              value == "revoker" ? getLabel(513844, '确认撤销吗?') : getLabel(388758, '确认要删除吗？'), [
          {
            text: getLabel(31129, "取消"),
            style: 'default'
          },
          {
            text: getLabel(826, "确定"),
            onPress: () => {
              editStatus({
                goalId,
                status,
                doback: () => {
                  changeGoalDetailField("status", status);
                  this.goBack(value)
                }
              })
            }
          }
        ])
      } else if (value == "addfb") {
        const { changeCurrpage } = this.props.goalDetailStore;
        changeCurrpage(3);
      } else {
        let special = value == "special" ? "1" : "0";
        setSpecial({
          goalId,
          special,
          doback: () => {
            changeGoalDetailField("special", special)
          }
        })
      }
    })
  }

    render (){
      const { headPopoverVisile } = this.state
        const {getOverlay,currpage,changeCurrpage,tabs,goalId,hasRight,canedit,detailData} = this.props.goalDetailStore;
        if(Util.isEmpty(goalId)){
          return (
            <AlertPage show={true} msg={getLabel(508825,'当前目标已经被删除')} icon={"no-data"}></AlertPage>
          )
        }
        if(hasRight&&!hasRight){
          return (
            <AlertPage show={true} msg={getLabel(508831,'你无权查看当前目标')} icon={"wuquanxian"}></AlertPage>
          )
        }
        return (
            <div className="workrelate_mobile_detail">
                <div className="workrelate_mobile_head">
                <TabPage
                    className="tab-page"
                    tabs={tabs}
                    tabProps={
                      {
                          onChange: (tab, index) => {
                              changeCurrpage(index)
                              // this.props.history.replace(this.props.location.pathname)
                          },
                          page: currpage
                      }
                    }
                    popover
                    popoverProps={
                      {
                        visible:headPopoverVisile,
                        overlay:getOverlay,
                        onSelect: this.handleSelect,
                      }
                    }
                />
                </div>

                <div className="main-content-wrapper">
                    {currpage == 0 && <GoalBaseInfo goalId = {goalId}></GoalBaseInfo>}
                    {currpage == 1 && <GoalSubInfo cancreate = {detailData.cancreate} goalId = {goalId}></GoalSubInfo>}
                    {currpage == 2 && <GoalRelateInfo goalId = {goalId}></GoalRelateInfo>}
                    {currpage == 3 && <GoalComment goalId = {goalId} viewdate={detailData.viewdate} status={detailData.status} ></GoalComment>}
                    {currpage == 4 && <GoalOperateLog goalId = {goalId}></GoalOperateLog>}
                    {currpage == 5 && <GoalShare goalId={goalId} canedit = {canedit}></GoalShare>}
                </div>
              
            </div>
        )
    }

}

export default GoalDetail; 